<ion-card>
  <div [ngClass]="{'playing': ifPlaying , '': !ifPlaying}" class="track-img">
    <img [src]="track.albumImages" alt="">
    <ion-card-title>
      <h2>{{track.name}}</h2>
    </ion-card-title>
    <h3>by {{track.artistsName}}</h3>
    <em>{{track.albumName}}</em>
  </div>
  <ion-card-content>
    <ion-grid>
      <ion-col col-12>
        <ion-range [(ngModel)]="progress" max="100" (ionFocus)="handleDrag()" (ionBlur)="seek($event.value)" color="secondary"></ion-range>
      </ion-col>
      <ion-row>
        <ion-col col-3 text-center>
          <button color="light" ion-fab >
           上一首
          </button>
        </ion-col>
        <ion-col col-3 text-center>
          <button color="light" ion-fab (click)="toggleSong()">
            <ion-icon color="secondary" name="play" *ngIf="!ifPlaying"></ion-icon>
            <ion-icon color="secondary" name="square" *ngIf="ifPlaying"></ion-icon>
          </button>
        </ion-col>
        <ion-col col-3 text-center>
          <button color="light" ion-fab >
           下一首
          </button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card-content>
  <ion-item>
    <p>Track Duration</p>
    <ion-badge item-right color="light">
      {{track.duration_ms | msToMinutes}}
    </ion-badge>
  </ion-item>
</ion-card>